const { reactive, effect } = VueReactivity;

function setHtml(html) {
  const app = document.getElementById('app');
  app.innerHTML = html;
}

const state = reactive({ a: 1, b: true });

effect(() => {
  // console.log(state.b);
  console.log('sss');
  if (state.b) {
    setHtml(state.a);
  } else {
    setHtml(state.b);
  }
  // effect(() => {
  //   setHtml(state.b + 1);
  // });
});

setTimeout(() => {
  state.b = false;
}, 1000);

setTimeout(() => {
  state.a += 1;
}, 3000);
// setTimeout(() => {
//   state.a += 1;
// }, 1000);

// setInterval(() => {
//   if (!state.b) {
//     state.b = 1;
//   } else {
//     state.b += 1;
//   }
// }, 1000);
